import { useState, useEffect } from 'react'
export const useMouse = () => {
  // #1
  const [pos, setPos] = useState({
    x: 0,
    y: 0,
  })
  useEffect(() => {
    // #2
    document.onmousemove = function (e) {
      setPos({
        x: e.pageX,
        y: e.pageY,
      })
    }
    // #4
    return () => {
      document.onmousemove = null
    }
  }, [])
  return pos
}

export const useScroll = () => {
  const [scroll, setScroll] = useState({
    scrollLeft: 0,
    scrollTop: 0,
  })
  useEffect(() => {
    const scroll = (e) => {
      setScroll({
        scrollLeft: window.pageXOffset,
        scrollTop: window.pageYOffset,
      })
    }
    window.addEventListener('scroll', scroll)
    return () => {
      window.removeEventListener('scroll', scroll)
    }
  }, [])
  return scroll
}
